import React, {Component,PropTypes,ViewPropTypes} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    ScrollView
} from 'react-native';

import GlobalStyles from '../res/styles/GlobalStyles';

export default class TalentItem extends Component {

    static defaultProps = {
        style: ViewPropTypes,
        talentServiceArray: '',
        filterArray: '',
        filterNumArray: '',
        index: '',
        filterPress: PropTypes.func
    }

    constructor(props) {
        super(props);
        this.state = {
            talentServiceArray: this.props.talentServiceArray,
            filterArray: this.props.filterArray,
            filterNumArray: this.props.filterNumArray,
            talentServiceArray: this.props.talentServiceArray,
            index: this.props.index,
            filterPress: this.props.filterPress
        };
    }

    onPress = (index) => {
        if (this.props.filterPress) {
            this.props.filterPress(index);
        }
  }

    render() {
        if (this.state.index == 0) {
            var filter = [];
            for (let i = 0; i < this.state.filterArray.length; i++) {
                filter.push(
                    <TouchableOpacity key={i} onPress={() => {
                        this.onPress(this.state.filterNumArray[i])
                    }}>
                        <View style={GlobalStyles.circle}>
                            <Text
                                style={{
                                color: 'white'
                            }}>{this.state.filterArray[i]}</Text>
                        </View>
                    </TouchableOpacity>
                );
            }
            return (
                <View >
                    <ScrollView
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                        style={{
                        padding: 8,
                        backgroundColor: GlobalStyles.bgColor
                    }}>
                        {filter}
                    </ScrollView>
                    <View style={GlobalStyles.line}/>
                </View>
            );
        } else {

            return (
                <TouchableOpacity
                    style={{
                    padding: 6,
                    width: '100%'
                }}>
                    <View
                        flexDirection='row'
                        style={{
                        width: '100%'
                    }}
                        justifyContent='space-between'>

                        <View justifyContent='center' flexDirection='row'>
                            <Image
                                source={require('../res/img/ic_announce_project.png')}
                                style={{
                                width: 48,
                                height: 48
                            }}/>
                            <View justifyContent='center'>
                                <Text>{this.state.talentServiceArray.talentServiceTitle}</Text>
                                <View flexDirection='row' marginTop={4}>
                                    <Text style={styles.subLabel}>{this.state.talentServiceArray.talentInfoName}</Text>
                                    <Text style={styles.subLabel}>|{this.state.talentServiceArray.techTypeName}</Text>
                                    <Text style={styles.subLabel}>|{this.state.talentServiceArray.talentInfoExperience}年</Text>
                                </View>
                            </View>

                        </View>
                        <View justifyContent='center' alignItems='flex-end'>
                            <Text style={styles.subLabel}>
                                {new Date(this.state.talentServiceArray.createTime).toLocaleString()}</Text>
                            <View flexDirection='row' alignItems='center' marginTop={14}>
                                <Image
                                    source={require('../res/img/ic_view.png')}
                                    style={{
                                    width: 12,
                                    height: 12
                                }}></Image>
                                <Text style={styles.subLabel}>{this.state.talentServiceArray.talentServiceView}</Text>
                            </View>
                        </View>
                    </View>
                </TouchableOpacity>
            );
        }
    }
}

const styles = StyleSheet.create({
    label: {},
    subLabel: {
        fontSize: 10,
        color: 'grey',
        marginLeft: 2
    }
})